<template>
  <LxyBox title="平台交易数据动态">
    <div class="trade-trend">
      <vue3-seamless-scroll
        :list="data"
        :hover="true"
        :limitScrollNum="7"
        class="list-wrap"
        :step="0.2"
      >
        <ul class="list">
          <li v-for="(l, i) in data" :key="i" class="item" :title="l.title">
            <span> {{ l.sign }} </span>
            <span> {{ l.unit }} </span>
            <span> {{ l.time }} </span>
            <span v-if="l.productName"> {{ l.productName }} </span>
            <span> {{ l.data }} </span>
          </li>
        </ul>
      </vue3-seamless-scroll>
    </div>
  </LxyBox>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import LxyBox from "./lxyBox";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
// gitee :https://gitee.com/longxinziyan/vue3-seamless-scroll
import { ajax } from "@/store/service";

const data = ref([]);

const getOrderNum = async () => {
  const res = await ajax.getOrderNum();
  res.forEach((l) => {
    if (l.productName) {
      l.title =
        l.sign +
        "  " +
        l.unit +
        "  " +
        l.time +
        "  " +
        l.productName +
        "  " +
        l.data;
    } else {
      l.title = l.sign + "  " + l.unit + "  " + l.time + "  " + l.data;
    }
  });
  data.value = res;
};
let timer = null;

const init = () => {
  getOrderNum();

  timer = setInterval(() => {
    getOrderNum();
  }, 60000);
};

onMounted(() => {
  init();
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped lang='scss'>
.trade-trend {
  /* height: vh(420); */
  height: vh(303);
  padding: 0 vw(20);
  .list-wrap {
    /* height: vh(400); */
	height: vh(283);
    overflow: hidden;

    .list {
      .item {
        font-size: vh(14);
        height: vh(40);
        background: #0e1537;
        border: 1px solid #133750;
        margin-bottom: vh(8);
        padding: 0 vw(12);
        line-height: vh(40);
        &:nth-child(2n) {
          background: #1c2656;
        }
        span {
          margin-right: vw(16);
        }
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>